
<template>
    <div 
    :class="{
      box:true,
      'is-right':isRight
    }"
    :style="{
      top:posY+'px',
      left:posX+'px'
    }"

    >
        <div class="left">
          <i class="is-blind"></i>
          <div class="username">{{username}}</div>
          <!-- <div class="">{{index}}</div> -->
        </div>
        <div class="right">
          <div class="avatar-bg">
            <i class="avatar"></i>
          </div>
            <button class="btn-blind" v-if="isBlind">开</button>
        </div>
    </div>
  </template>
  
  <script setup>
  const props = defineProps(['username','isBlind','posX','posY','isRight','index'])

  </script>
  
  <style scoped lang="less">
  .box{
    position: absolute;
    width: .5rem;
    height: .5rem;
    display: flex;
    gap: .03rem;
    transform: translateX(-0.2rem) translateY(-0.2rem);
    .left{
      position: absolute;
      left: -100%;
      .is-blind{
        background: url('../assets/image/icon-blind.png') no-repeat center;
        background-size: 100%;
        display: block;
        width: .4rem;
        height: .4rem;

      }
      .username{
        color: #fff;
        opacity: 1;
        /** 文本1 */
        font-size: .14rem;
        font-weight: 400;
        letter-spacing: 0;
        line-height: .2rem;
        text-align: center;
        vertical-align: middle;
      }
      
    }
    .right{
      width: .5rem;
      position: absolute;
      left: 0;
      display: flex;
      flex-direction: column;
      gap: .05rem;
      .avatar-bg{
        border-radius: 50%;
        padding: .1rem;
        background-color: #FED423;
        border: .05rem solid rgba(203, 13, 13, 1);
        width: .5rem;
        height: .5rem;
        box-sizing: border-box;
        .avatar{
          background: url('../assets/image/avatar.png') no-repeat center;
          background-size: 100%;
          width: 100%;
          height: 100%;
          display: block;
        }
      }
      .btn-blind{
        margin: 0 auto;
        width: .45rem;
        height: .2rem;
        font-size: .12rem;
        color: #fff;
        background: #F8772E;
        display: flex;
        align-items: center; 
      }
    }
    &.is-right{
      .left{
        left:100%;
      }
      .right{
        right:0;
      }
    }
  }
  </style>
  